<template>
    <div class="aside">
        <el-col>
            <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                :router="true"
                >
                    <el-menu-item index="1" route="/calendar">
                        <el-icon><Document /></el-icon>
                        <span>消费日历</span>
                    </el-menu-item>
                    <el-menu-item index="2" route="/summary">
                        <el-icon><Document /></el-icon>
                        <span>分析概览</span>
                    </el-menu-item>
                    <el-menu-item index="3" route="/input">
                        <el-icon><Document /></el-icon>
                        <span>流水管理</span>
                    </el-menu-item>
                    <el-menu-item index="4" route="/account">
                        <el-icon><Document /></el-icon>
                        <span>账户管理</span>
                    </el-menu-item>
                    <el-sub-menu index="5">
                        <template #title>
                            <el-icon><Document /></el-icon>
                            <span>辅助功能</span>
                        </template>
                        <el-menu-item index="5-1" route="/book">
                            <el-icon><Document /></el-icon>
                            <span>账本管理</span>
                        </el-menu-item>
                        <el-menu-item index="5-2" route="/setting">
                            <el-icon><Document /></el-icon>
                            <span>系统设置</span>
                        </el-menu-item>
                    </el-sub-menu>
            </el-menu>
        </el-col>
    </div>
</template>

<script lang="ts" setup>
    import { Document } from '@element-plus/icons-vue'
    const activeIndex = ref('1')
</script>

<style lang="scss" scoped>
.aside {
    ul {
        border: none;
    }
}
</style>